<template>
  <div :class="{ disabled: !isSupported }" @click="proceed">
    <svg width="119" height="27" viewBox="0 0 119 27" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M25.1596 7.69434H9.35092C8.42199 7.69434 7.66895 8.44986 7.66895 9.38184V25.2424C7.66895 26.1744 8.42199 26.9299 9.35092 26.9299H25.1596C26.0885 26.9299 26.8415 26.1744 26.8415 25.2424V9.38184C26.8415 8.44986 26.0885 7.69434 25.1596 7.69434Z"
        fill="#F472B6"
        fill-opacity="0.7"
      />
      <path
        d="M21.3246 3.84717H5.51596C4.58703 3.84717 3.83398 4.60269 3.83398 5.53467V21.3952C3.83398 22.3272 4.58703 23.0827 5.51596 23.0827H21.3246C22.2535 23.0827 23.0066 22.3272 23.0066 21.3952V5.53467C23.0066 4.60269 22.2535 3.84717 21.3246 3.84717Z"
        fill="url(#paint0_linear_3480_11465)"
        fill-opacity="0.8"
      />
      <path
        d="M17.4906 0H1.68198C0.753048 0 0 0.755519 0 1.6875V17.548C0 18.48 0.753048 19.2355 1.68198 19.2355H17.4906C18.4195 19.2355 19.1726 18.48 19.1726 17.548V1.6875C19.1726 0.755519 18.4195 0 17.4906 0Z"
        fill="#818CF8"
        fill-opacity="0.9"
      />
      <path
        class="letter"
        d="M35.9345 18.3515C35.7745 18.3515 35.6346 18.2963 35.5146 18.186C35.4046 18.0757 35.3496 17.9352 35.3496 17.7647V7.18676C35.3496 7.02626 35.4046 6.89084 35.5146 6.78049C35.6346 6.66012 35.7745 6.59993 35.9345 6.59993C36.0945 6.59993 36.2295 6.66012 36.3395 6.78049C36.4594 6.89084 36.5194 7.02626 36.5194 7.18676V17.2381H42.3835C42.5435 17.2381 42.6785 17.2933 42.7884 17.4036C42.9084 17.5039 42.9684 17.6343 42.9684 17.7948C42.9684 17.9553 42.9084 18.0908 42.7884 18.2011C42.6785 18.3014 42.5435 18.3515 42.3835 18.3515H35.9345ZM48.3048 18.4268C47.5349 18.4268 46.845 18.2462 46.2351 17.8851C45.6252 17.5139 45.1403 17.0124 44.7803 16.3804C44.4304 15.7484 44.2554 15.0362 44.2554 14.2437C44.2554 13.4413 44.4354 12.724 44.7953 12.092C45.1653 11.4601 45.6652 10.9635 46.2951 10.6024C46.925 10.2312 47.6349 10.0457 48.4247 10.0457C49.2146 10.0457 49.9195 10.2312 50.5394 10.6024C51.1693 10.9635 51.6642 11.4601 52.0242 12.092C52.3941 12.724 52.5841 13.4413 52.5941 14.2437V17.7798C52.5941 17.9503 52.5391 18.0908 52.4291 18.2011C52.3192 18.3014 52.1791 18.3515 52.0092 18.3515C51.8392 18.3515 51.6992 18.3014 51.5893 18.2011C51.4793 18.0908 51.4243 17.9503 51.4243 17.7798V16.8619C51.0843 17.3434 50.6444 17.7246 50.1045 18.0055C49.5646 18.2864 48.9647 18.4268 48.3048 18.4268ZM48.4247 17.3735C49.0047 17.3735 49.5196 17.2381 49.9695 16.9672C50.4295 16.6964 50.7894 16.3252 51.0493 15.8538C51.3193 15.3723 51.4543 14.8356 51.4543 14.2437C51.4543 13.6419 51.3193 13.1052 51.0493 12.6337C50.7894 12.1623 50.4295 11.7911 49.9695 11.5203C49.5196 11.2394 49.0047 11.0989 48.4247 11.0989C47.8548 11.0989 47.3399 11.2394 46.88 11.5203C46.42 11.7911 46.0551 12.1623 45.7852 12.6337C45.5152 13.1052 45.3802 13.6419 45.3802 14.2437C45.3802 14.8356 45.5152 15.3723 45.7852 15.8538C46.0551 16.3252 46.42 16.6964 46.88 16.9672C47.3399 17.2381 47.8548 17.3735 48.4247 17.3735ZM56.2499 21.9327C56.1699 21.9327 56.0799 21.9127 55.9799 21.8725C55.6399 21.722 55.545 21.4813 55.695 21.1503L57.1947 17.855L57.1797 17.8399L53.8353 10.8883C53.7652 10.7378 53.7553 10.5974 53.8053 10.467C53.8552 10.3365 53.9552 10.2363 54.1052 10.166C54.4352 10.0156 54.6751 10.1009 54.8251 10.4218L57.7496 16.6061L60.5392 10.4369C60.6892 10.1159 60.9291 10.0256 61.2591 10.166C61.5991 10.3065 61.694 10.5422 61.544 10.8732L56.6848 21.5866C56.5848 21.8173 56.4399 21.9327 56.2499 21.9327ZM66.4831 18.4268C65.6732 18.4268 64.9533 18.2512 64.3234 17.9001C63.7035 17.539 63.2136 17.0425 62.8537 16.4105C62.5037 15.7785 62.3287 15.0563 62.3287 14.2437C62.3287 13.4212 62.4937 12.6989 62.8237 12.077C63.1636 11.445 63.6285 10.9485 64.2185 10.5874C64.8083 10.2262 65.4882 10.0457 66.2581 10.0457C67.018 10.0457 67.6779 10.2212 68.2378 10.5723C68.8077 10.9134 69.2476 11.3898 69.5576 12.0018C69.8675 12.6137 70.0225 13.3108 70.0225 14.0933C70.0225 14.2538 69.9725 14.3842 69.8726 14.4845C69.7726 14.5748 69.6426 14.6199 69.4826 14.6199H63.4236C63.4836 15.1616 63.6485 15.6431 63.9185 16.0644C64.1885 16.4757 64.5434 16.8017 64.9833 17.0425C65.4232 17.2732 65.9231 17.3885 66.4831 17.3885C66.843 17.3885 67.203 17.3284 67.5629 17.208C67.9328 17.0775 68.2278 16.9171 68.4478 16.7265C68.5577 16.6362 68.6827 16.5911 68.8227 16.5911C68.9627 16.581 69.0827 16.6162 69.1827 16.6964C69.3126 16.8168 69.3776 16.9472 69.3776 17.0876C69.3876 17.228 69.3326 17.3484 69.2127 17.4487C68.8827 17.7296 68.4628 17.9653 67.9529 18.1559C67.4429 18.3365 66.953 18.4268 66.4831 18.4268ZM66.2581 11.0839C65.4882 11.0839 64.8533 11.3247 64.3534 11.8062C63.8535 12.2776 63.5535 12.8945 63.4536 13.6569H68.9427C68.8627 12.8945 68.5828 12.2776 68.1028 11.8062C67.6329 11.3247 67.018 11.0839 66.2581 11.0839ZM72.5459 18.3515C72.166 18.3515 71.9761 18.1609 71.9761 17.7798V10.6927C71.9761 10.3115 72.166 10.1209 72.5459 10.1209C72.9257 10.1209 73.1156 10.3115 73.1156 10.6927V11.3397C73.4156 10.9384 73.7856 10.6224 74.2257 10.3917C74.6658 10.151 75.1508 10.0306 75.6806 10.0306C76.1404 10.0306 76.4957 10.0958 76.7452 10.2262C76.9954 10.3567 77.09 10.5472 77.0304 10.798C76.98 11.0287 76.8601 11.1491 76.6702 11.1591C76.4901 11.1591 76.2756 11.1491 76.0255 11.129C75.4655 11.0789 74.9658 11.1391 74.5257 11.3096C74.0961 11.4701 73.7506 11.7209 73.4906 12.0619C73.2411 12.403 73.1156 12.8093 73.1156 13.2807V17.7798C73.1156 18.1609 72.9257 18.3515 72.5459 18.3515ZM82.5943 18.502C81.6348 18.502 80.7847 18.2963 80.0447 17.8851C79.3151 17.4738 78.7951 16.9271 78.4853 16.245C78.4054 16.0845 78.3998 15.939 78.4699 15.8086C78.5498 15.6682 78.6802 15.5729 78.8603 15.5227C78.9997 15.4826 79.135 15.4976 79.2654 15.5679C79.4048 15.6381 79.5099 15.7434 79.58 15.8839C79.8099 16.3252 80.1897 16.6863 80.7196 16.9672C81.2494 17.2481 81.8745 17.3885 82.5943 17.3885C83.3841 17.3885 84.0345 17.1979 84.544 16.8168C85.064 16.4255 85.324 15.8638 85.324 15.1315C85.324 14.5196 85.099 13.9929 84.6491 13.5516C84.1992 13.1102 83.4941 12.8293 82.5347 12.709C81.365 12.5685 80.4498 12.2074 79.7903 11.6256C79.1301 11.0338 78.8 10.3115 78.8 9.45884C78.8 8.84691 78.9598 8.31528 79.2801 7.86387C79.6102 7.41246 80.0601 7.06638 80.6299 6.82563C81.1996 6.57485 81.8549 6.44946 82.5943 6.44946C83.4241 6.44946 84.134 6.64006 84.7241 7.02124C85.3142 7.39242 85.769 7.83378 86.0893 8.34537C86.1888 8.50589 86.2189 8.66135 86.179 8.81182C86.1489 8.96229 86.0641 9.07767 85.9239 9.1579C85.7739 9.22814 85.619 9.23813 85.4592 9.18799C85.3093 9.13786 85.1943 9.04252 85.1144 8.9021C84.8839 8.55103 84.5692 8.24503 84.169 7.98424C83.7794 7.7134 83.2495 7.57299 82.5796 7.56293C81.7897 7.56293 81.1548 7.73344 80.6747 8.07453C80.1947 8.40556 79.955 8.89205 79.955 9.53407C79.955 10.0457 80.1596 10.4921 80.5696 10.8732C80.9901 11.2544 81.7295 11.5203 82.7898 11.6707C84.0394 11.8513 84.9645 12.2375 85.5644 12.8293C86.1741 13.4112 86.4789 14.1735 86.4789 15.1165C86.4789 15.8387 86.3037 16.4556 85.954 16.9672C85.6141 17.4688 85.1488 17.85 84.5594 18.1108C83.9693 18.3716 83.3147 18.502 82.5943 18.502ZM90.6348 18.3515C90.3552 18.3515 90.1702 18.2262 90.0798 17.9754L87.7404 10.9334C87.6101 10.3917 87.7551 10.1209 88.1749 10.1209C88.4455 10.1209 88.6354 10.2664 88.7454 10.5573L90.665 16.4255L92.4345 10.5723C92.4745 10.4419 92.5397 10.3365 92.6294 10.2563C92.7296 10.166 92.8543 10.1209 93.0043 10.1209C93.2945 10.1209 93.4844 10.2714 93.5741 10.5723L95.2988 16.3954L97.2037 10.5573C97.3039 10.2664 97.4889 10.1209 97.7587 10.1209C97.9788 10.1209 98.1287 10.2062 98.2086 10.3767C98.2885 10.5372 98.2885 10.7228 98.2086 10.9334L95.8693 17.9754C95.7894 18.2262 95.6093 18.3515 95.3289 18.3515C95.1993 18.3515 95.0795 18.3165 94.9694 18.2462C94.8692 18.176 94.804 18.0857 94.7739 17.9754L92.9742 11.9867L91.1745 17.9754C91.0848 18.2262 90.9046 18.3515 90.6348 18.3515ZM103.199 18.4268C102.428 18.4268 101.739 18.2462 101.129 17.8851C100.519 17.5139 100.034 17.0124 99.6741 16.3804C99.3243 15.7484 99.1491 15.0362 99.1491 14.2437C99.1491 13.4413 99.3293 12.724 99.6888 12.092C100.059 11.4601 100.559 10.9635 101.189 10.6024C101.819 10.2312 102.529 10.0457 103.318 10.0457C104.108 10.0457 104.813 10.2312 105.433 10.6024C106.063 10.9635 106.558 11.4601 106.918 12.092C107.288 12.724 107.478 13.4413 107.488 14.2437V17.7798C107.488 17.9503 107.433 18.0908 107.323 18.2011C107.213 18.3014 107.073 18.3515 106.903 18.3515C106.733 18.3515 106.593 18.3014 106.483 18.2011C106.373 18.0908 106.318 17.9503 106.318 17.7798V16.8619C105.978 17.3434 105.538 17.7246 104.998 18.0055C104.459 18.2864 103.859 18.4268 103.199 18.4268ZM103.318 17.3735C103.899 17.3735 104.413 17.2381 104.863 16.9672C105.323 16.6964 105.683 16.3252 105.943 15.8538C106.213 15.3723 106.348 14.8356 106.348 14.2437C106.348 13.6419 106.213 13.1052 105.943 12.6337C105.683 12.1623 105.323 11.7911 104.863 11.5203C104.413 11.2394 103.899 11.0989 103.318 11.0989C102.749 11.0989 102.233 11.2394 101.774 11.5203C101.314 11.7911 100.949 12.1623 100.679 12.6337C100.409 13.1052 100.274 13.6419 100.274 14.2437C100.274 14.8356 100.409 15.3723 100.679 15.8538C100.949 16.3252 101.314 16.6964 101.774 16.9672C102.233 17.2381 102.749 17.3735 103.318 17.3735ZM110.319 21.8725C110.139 21.8725 109.994 21.8173 109.884 21.707C109.783 21.6067 109.734 21.4662 109.734 21.2857V14.1836C109.744 13.4011 109.929 12.6989 110.289 12.077C110.659 11.445 111.154 10.9485 111.774 10.5874C112.403 10.2262 113.108 10.0457 113.888 10.0457C114.688 10.0457 115.403 10.2312 116.033 10.6024C116.663 10.9635 117.158 11.4601 117.518 12.092C117.888 12.724 118.073 13.4413 118.073 14.2437C118.073 15.0362 117.893 15.7484 117.532 16.3804C117.183 17.0124 116.703 17.5139 116.093 17.8851C115.483 18.2462 114.793 18.4268 114.023 18.4268C113.353 18.4268 112.743 18.2864 112.194 18.0055C111.653 17.7146 111.219 17.3333 110.889 16.8619V21.2857C110.889 21.4662 110.833 21.6067 110.724 21.707C110.624 21.8173 110.488 21.8725 110.319 21.8725ZM113.888 17.3735C114.468 17.3735 114.988 17.2381 115.448 16.9672C115.908 16.6964 116.267 16.3252 116.527 15.8538C116.798 15.3723 116.933 14.8356 116.933 14.2437C116.933 13.6419 116.798 13.1052 116.527 12.6337C116.267 12.1623 115.908 11.7911 115.448 11.5203C114.988 11.2394 114.468 11.0989 113.888 11.0989C113.318 11.0989 112.803 11.2394 112.344 11.5203C111.883 11.7911 111.524 12.1623 111.264 12.6337C111.004 13.1052 110.874 13.6419 110.874 14.2437C110.874 14.8356 111.004 15.3723 111.264 15.8538C111.524 16.3252 111.883 16.6964 112.344 16.9672C112.803 17.2381 113.318 17.3735 113.888 17.3735Z"
        fill="black"
      />
      <defs>
        <linearGradient
          id="paint0_linear_3480_11465"
          x1="13.4203"
          y1="3.84717"
          x2="13.4203"
          y2="23.0827"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#818CF8" />
          <stop offset="1" stop-color="#F472B6" />
        </linearGradient>
      </defs>
    </svg>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Address } from "zksync/build/types";
import { ZkEthereumNetworkName } from "@matterlabs/zksync-nuxt-core/types";

export default Vue.extend({
  name: "ProviderLayerSwap",
  computed: {
    network(): ZkEthereumNetworkName {
      return this.$store.getters["zk-provider/network"];
    },
    isSupported(): boolean {
      return this.network === "mainnet";
    },
    address(): Address {
      return this.$store.getters["zk-account/address"];
    },
  },
  methods: {
    proceed() {
      if (!this.isSupported) {
        this.$emit("providerError", `Provider LayerSwap is not supported for the “${this.network}” network`);
        return;
      }
      this.$analytics.track("click_on_buy_with_layerswap");
      window.open(
        `https://www.layerswap.io/?referer=zksync&destNetwork=ZKSYNC_MAINNET&lockNetwork=true&addressSource=zksyncweb&lockAddress=true&destAddress=${this.address}`,
        "_blank"
      );
    },
  },
});
</script>

<style lang="scss" scoped>
svg {
  width: 55%;
}
</style>
